<template>
  <div class="mapFindRoom">
    <header class="header">
      <i @click="goBack">返回</i>
      <p>地图找房</p>
    </header>
    <div class="select">
      <picker
        mode="selector"
        :range="cityList"
        range-key="label"
        @change="changeCity"
        >{{ city.label || "北京" }}</picker
      >
      <input
        type="text"
        placeholder="请在这里输入区域/商圈"
        placeholder-style="font-size: 30rpx;margin-left: 20rpx;"
      />
    </div>
    <map
      :show-location="true"
      :markers="markers"
      :include-points="markers"
      @labeltap="labelTap"
    ></map>
  </div>
</template>

<script>
import { getCity, getHouseMap } from "../../services/index";
export default {
  data() {
    return {
      city: {},
      cityList: [],
      areaList: [],
      areaId: "",
    };
  },
  watch: {
    areaId: {
      handler: async function(value) {
        if (value) {
          let result = await getHouseMap(value);
          if (result.status === 200 && result.body.length) {
            this.areaList = result.body;
          }
        }
      },
      deep: true, // 深度监听
      immediate: true, // 立即触发
    },
  },
  computed: {
    markers() {
      return this.areaList.map((item, index) => {
        return {
          id: index,
          ...item.coord,
          label: {
            value: item.value,
            content: `${item.label}有${item.count}个房源`,
            bgColor: "#000000cc",
            padding: 6,
            color: "#fcc616",
            fontSize: 12,
            borderRadius: 10,
          },
          width: 0,
          height: 0,
        };
      });
    },
  },
  async onShow() {
    let result = await getCity();
    if (result.status === 200) {
      this.cityList = result.body;
      this.city = this.cityList[0];
      this.areaId = this.city.value;
    }
  },
  methods: {
    changeCity(e) {
      this.city = this.cityList[e.target.value];
      this.areaId = this.cityList[e.target.value].value;
    },
    labelTap({ detail: { markerId } }) {
      console.log("arguments", arguments);
      this.areaId = this.areaList[markerId].value;
    },
    goBack() {
      //    wx.switchTab({    //跳转到首页
      //        url:"/pages/index/index"
      //  })
      wx.navigateBack({  // 返回上一页
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.mapFindRoom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 200rpx;
  background: linear-gradient(90deg, #0e7ef3, #329ffd);
  display: flex;
  line-height: 200rpx;
  color: #fff;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 9;
}
.header > p {
  margin-left: 180rpx;
}
.select {
  display: flex;
}
.select > input {
  width: 260prx;
  height: 50rpx;
  border: 1px solid #ddd;
  background-color: #eee;
  margin: 17rpx 0 0 35rpx;
}
picker {
  position: relative;
  margin: 20rpx;
}
picker::after {
  content: "";
  position: absolute;
  top: -16rpx;
  left: 85rpx;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15rpx 10rpx 0 10rpx;
  border-color: rgb(128, 125, 125) transparent transparent transparent;
  margin-top: 1rem;
}
map {
  width: 100%;
  flex: 1;
}
</style>
